Lists and Keys
Rendering Multiple Components
mapを使って生成したReact elementをDOMにバインドする
code:JavaScript
const listItems = numbers.map(number => <li>{number}</li>);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById("root")
);
Basic List Component
特別な属性keyを埋め込んで、警告表示を消す
code:JavaScript
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map(number => (
<li key={number.toString()}>{number}</li>
));
return <ul>{listItems}</ul>;
}
Keys
keyにはIDのような文字列の一意になるものを与えたほうがよい
もしリストに変更がないなら配列のインデックスでもよい
ただ、パフォーマンス懸念と状態に影響を与える可能性があるため、できれば一意になるものを与えたほうがよい
一意になるものを適用しない場合、Reactはデフォルトでインデックスをキーとして使用する
Extracting Components with Keys
keyが必要なコンポーネント抽出時に、keyが必要なところで付与すること
mapをコールした中のelementではkeyが必要
Keys Must Only Be Unique Among Siblings
keyは兄弟要素で一意であればよく、グローバルで一意である必要はない
code:JavaScript
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
const content = props.posts.map(post => (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
));
return (
<div>
{sidebar} /* ここでpost.idをkeyとして使用している */
<hr />
{content} /* ここでpost.idをkeyとして使用している */
</div>
);
}
もし以下のようにkeyにも使いたいけど、propsとしても渡したいという場合は同じ名前で別々のセットをすればよい
code:JavaScript
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
Embedding map() in JSX
renderメソッド内でmapを使った展開も可能
可読性の問題に発展しやすいので、ルールづくりと見にくくなった場合はコンポーネント分割を
code:JavaScript
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}